<template>
  <div class="section">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="s in slides" class="swiper-slide">
          <img :src="s.img_url"/>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="announcement">
      <label>快讯</label>
      <span>{{announcement}}</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Swiper from "swiper"
  import 'swiper/dist/css/swiper.css'
  import "./list.less"

  export default {
    props:["slides","announcement"]
    ,beforeCreate(){
      console.log("slide beforeCreate");
    }
    ,created(){
      console.log("slide created");
    }
    ,beforeMount(){
      console.log("slide beforeMount");
    }
    ,mounted() {
      window.setTimeout(function(){
        new Swiper('.swiper-container', {
          pagination:'.swiper-pagination',//this.$refs.pagination,
          paginationClickable: true,
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: 2500,
          autoplayDisableOnInteraction: false
        })
      },1000)
      console.log("wating...");
    }
  }
</script>
